<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="我的" left-text="首页" left-arrow @click-left="$router.push('/home')" />
        </header>
        <van-share-sheet @click="showShare = true" v-model="showShare" title="立即分享给好友" :options="options"
            @select="onSelect" />
        <div class="content">
            <div class="tx">
                <img src="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png"
                    alt="">
                <p v-if="userid" class="p1">
                    {{ userid.slice(0, 10) }}
                </p>
                <p v-else class="p1">未登录</p>
            </div>
            <van-button v-if="loginState" @click="logout" type="danger">退出登录</van-button>
            <van-button v-else @click="login" type="info">请登录</van-button>
            <!-- {{ listLen }} -->
            <van-grid class="grid">
                <van-grid-item @click="dz" icon="location-o" text="地址" />
                <van-grid-item @click="rm" icon="fire-o" text="热卖" />
                <van-grid-item @click="gwc" icon="cart-o" text="购物车" />
                <van-grid-item @click="showShare = true" @select="onSelect" icon="share-o" text="分享" />
            </van-grid>

            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

                <van-nav-bar title="热卖" />
                <!-- 设置上拉加载更多 -->
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="100"
                    :immediate-check="false">
                    <ProList :proList="proList" />
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>
<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import Vue from 'vue';
import { Button, NavBar, Grid, GridItem, ShareSheet, Toast } from 'vant';
import { mapGetters, mapMutations, mapState } from 'vuex'

import { getSeckillList, getProList } from "@/api/home"; // @ 是 src 目录，.js 可以不写

import ProList from "@/components/ProList";

Vue.use(ShareSheet);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(NavBar);
Vue.use(Button);
Vue.use(Toast);
export default {
    data() {
        return {
            proList: [],
            loading: false, // 表示是不是上拉加载的状态
            finished: false, // 表示数据是否已经被加载完
            count: 2, //因为在 mounted 中已经加载了第一页数据了，所以这里从第 2 页开始
            isLoading: false,
            scrollTop: 0,
            seckillList: [],
            userid: '',
            showShare: false,
            options: [
                { name: '微信', icon: 'wechat' },
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
            ],
        };
    },
    components: {
        ProList,
    },
    // computed: {
    //   loginState(){
    //     return this.$store.state.loginState
    //   },
    // },
    // 第二种获取状态的方法
    computed: {
        // mapState 要放在计算属性中
        ...mapState({
            loginState: state => state.user.loginState,
        }),
        // 第一种获取 getters
        // listLen(){
        //   return this.$store.getters.len
        // }
        // 第二种获取的方法
        ...mapGetters({
            listLen: 'len'
        })
    },
    mounted() {
        // 获取秒杀的列表
        getSeckillList().then((res) => {
            // console.log(res);
            this.seckillList = res.data;
        });
        // 获取产品列表的数据
        getProList().then((res) => {
            // console.log(res.data);
            this.proList = res.data;
        });

        // 获取到页面的滚动距离
        // console.log(this.$refs.content);
        // this.$refs.content.addEventListener("scroll", () => {
        //     this.scrollTop = this.$refs.content.scrollTop;
        // });
        // this.user = localStorage.getItem('userid')
        // console.log(userid);
        // console.log(token);
        // 获取登录状态
        const loginState = localStorage.getItem('loginState') === 'true'
        if (loginState) {
            this.userid = localStorage.getItem('userid')
        }
    },
    methods: {
        // 页面上拉到底一定会触发的函数
        onLoad() {
            // 在函数中进行数据请求拿到对应页数的数据
            // console.log('触发上拉了');
            // 请求开始
            this.loading = true;
            // 数据请求
            getProList({ count: this.count }).then((res) => {
                // 请求结束
                this.loading = false;

                if (res.data.length == 0) {
                    // 没有数据
                    this.finished = true;
                } else {
                    // 有数据
                    // 将两个数组合并成一个 concat
                    this.proList = [...this.proList, ...res.data];
                    // 有数据 -- 将页码进行加 1
                    this.count++;
                }
            });
        },
        onRefresh() {
            this.isLoading = true;
            // 获取产品列表的数据
            getProList().then((res) => {
                //
                // console.log("下拉新的数据了");
                this.isLoading = false;
                this.proList = res.data;
                // 重置 将页码以及是否还有数据 --- 改为初始状态
                this.count = 2;
                this.finished = false;
            });
        },
        backTops() {
            this.$refs.content.scrollTop = 0;
        },

        onSelect() {
            this.showShare = false;
        },
        dz() {
            this.$router.push('/order/addnew')
        },
        gwc() {
            this.$router.push('/cart')
        },
        rm() {
            this.$router.push('/kind')
        },
        ...mapMutations({
            // key 可以随便起名字，value 是 mutation 中的函数名
            changeLoginState: 'changeLoginState'
        }),
        login() {
            this.$router.push('/login')
        },
        logout() {
            // 退出登录
            localStorage.removeItem('token')
            localStorage.removeItem('userid')
            localStorage.removeItem('loginState')
            // this.$store.commit('changeLoginState', false)
            this.changeLoginState(false)

            // 调用 actions 中的函数
            // this.$store.dispatch('loginAction', false)
            console.log(this.$store);
            this.$router.push('/login')
        }
    }
}
</script>
<style scoped>
.content {
    padding: 20px 12px;
}

.tx {
    width: 100%;
    height: 100px;
    padding-left: 50px;
    background: #ff8181;
    display: flex;
    box-sizing: border-box;
    padding-top: 10px;
}

.tx img {
    width: 80px;
    height: 80px;
}

.grid {
    margin-bottom: 30px;
}

.van-button {
    /* position: absolute; */
    position: relative;
    top: -70px;
    left: 250px;
    z-index: 1;
}


.p1 {
    padding-top: 12px;
    padding-left: 10px;
    font-size: 20px;
}
</style>